
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-diqiu"></i>
                    <div class="name">地球</div>
                    <div class="fontclass">.icon-diqiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenjuan"></i>
                    <div class="name">问卷</div>
                    <div class="fontclass">.icon-wenjuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin2"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-diannao"></i>
                    <div class="name">电脑</div>
                    <div class="fontclass">.icon-diannao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-QQ"></i>
                    <div class="name">QQ</div>
                    <div class="fontclass">.icon-QQ</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouji1"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.icon-shouji1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youxiang"></i>
                    <div class="name">邮箱</div>
                    <div class="fontclass">.icon-youxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erweima"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-erweima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangzhu"></i>
                    <div class="name">帮助</div>
                    <div class="fontclass">.icon-bangzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanji"></i>
                    <div class="name">关机</div>
                    <div class="fontclass">.icon-guanji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontziliao"></i>
                    <div class="name">资料</div>
                    <div class="fontclass">.icon-iconfontziliao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wifi"></i>
                    <div class="name">wifi</div>
                    <div class="fontclass">.icon-wifi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-phone1"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.icon-phone1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-time"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-time</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tubiaozitihua03"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-tubiaozitihua03</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-app1"></i>
                    <div class="name">APP</div>
                    <div class="fontclass">.icon-app1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconshezhi01"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-iconshezhi01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erweima1"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-erweima1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianjie"></i>
                    <div class="name">链接</div>
                    <div class="fontclass">.icon-lianjie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-01"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-leaf"></i>
                    <div class="name">树叶</div>
                    <div class="fontclass">.icon-leaf</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouc01"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-shouc01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontweibowukuang"></i>
                    <div class="name">微博</div>
                    <div class="fontclass">.icon-iconfontweibowukuang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-msnui-shops"></i>
                    <div class="name">商家</div>
                    <div class="fontclass">.icon-msnui-shops</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bianji"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yangguangjiage"></i>
                    <div class="name">阳光价格</div>
                    <div class="fontclass">.icon-yangguangjiage</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xin"></i>
                    <div class="name">心</div>
                    <div class="fontclass">.icon-xin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qq"></i>
                    <div class="name">qq</div>
                    <div class="fontclass">.icon-qq</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhinan"></i>
                    <div class="name">指南</div>
                    <div class="fontclass">.icon-zhinan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yifu"></i>
                    <div class="name">衣服</div>
                    <div class="fontclass">.icon-yifu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-phone"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-phone</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon61"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-icon61</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon31"></i>
                    <div class="name">模型</div>
                    <div class="fontclass">.icon-icon31</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huanyingye"></i>
                    <div class="name">欢迎页</div>
                    <div class="fontclass">.icon-huanyingye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontcolor32"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-iconfontcolor32</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renmai"></i>
                    <div class="name">人脉</div>
                    <div class="fontclass">.icon-renmai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icontouzi"></i>
                    <div class="name">投资</div>
                    <div class="fontclass">.icon-icontouzi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-msnui-task"></i>
                    <div class="name">任务</div>
                    <div class="fontclass">.icon-msnui-task</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ku"></i>
                    <div class="name">库</div>
                    <div class="fontclass">.icon-ku</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fuzhuangdapei"></i>
                    <div class="name">服装搭配</div>
                    <div class="fontclass">.icon-fuzhuangdapei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-password"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-password</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconnav2"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-iconnav2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouji"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.icon-shouji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wode"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.icon-wode</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhihuanyingye"></i>
                    <div class="name">设置-欢迎页</div>
                    <div class="fontclass">.icon-shezhihuanyingye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinlingyingcaiwangtubiao09"></i>
                    <div class="name">金融 </div>
                    <div class="fontclass">.icon-jinlingyingcaiwangtubiao09</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinlingyingcaiwangtubiao84"></i>
                    <div class="name">地点</div>
                    <div class="fontclass">.icon-jinlingyingcaiwangtubiao84</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kecheng"></i>
                    <div class="name">课程</div>
                    <div class="fontclass">.icon-kecheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-location"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-location</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconshezhi011"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-iconshezhi011</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-icon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-circle"></i>
                    <div class="name">圆圈标记</div>
                    <div class="fontclass">.icon-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shape3"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-shape3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-camera"></i>
                    <div class="name">相机</div>
                    <div class="fontclass">.icon-camera</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youxiang1"></i>
                    <div class="name">邮箱</div>
                    <div class="fontclass">.icon-youxiang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-3"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-shijian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangzuo01"></i>
                    <div class="name">向左</div>
                    <div class="fontclass">.icon-xiangzuo01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua1"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-anli"></i>
                    <div class="name">案例</div>
                    <div class="fontclass">.icon-anli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chaweizhang"></i>
                    <div class="name">查违章</div>
                    <div class="fontclass">.icon-chaweizhang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huodong"></i>
                    <div class="name">活动</div>
                    <div class="fontclass">.icon-huodong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ershouchejiaoyiliuchengpeixunzhichi"></i>
                    <div class="name">二手车交易流程培训支持</div>
                    <div class="fontclass">.icon-ershouchejiaoyiliuchengpeixunzhichi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangcheng"></i>
                    <div class="name">商城</div>
                    <div class="fontclass">.icon-shangcheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-saoma"></i>
                    <div class="name">扫码</div>
                    <div class="fontclass">.icon-saoma</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-demo06"></i>
                    <div class="name">对话</div>
                    <div class="fontclass">.icon-demo06</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kuajingzhifuiconqiye"></i>
                    <div class="name">企业</div>
                    <div class="fontclass">.icon-kuajingzhifuiconqiye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kaoshi"></i>
                    <div class="name">考试</div>
                    <div class="fontclass">.icon-kaoshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-book"></i>
                    <div class="name">书</div>
                    <div class="fontclass">.icon-book</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erji"></i>
                    <div class="name">耳机-</div>
                    <div class="fontclass">.icon-erji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Secret"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-Secret</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baoming"></i>
                    <div class="name">报名</div>
                    <div class="fontclass">.icon-baoming</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yaoqingmaicon"></i>
                    <div class="name">邀请码ICON</div>
                    <div class="fontclass">.icon-yaoqingmaicon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhi"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti101"></i>
                    <div class="name">地点</div>
                    <div class="fontclass">.icon-weibiaoti101</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontwangting"></i>
                    <div class="name">网厅</div>
                    <div class="fontclass">.icon-iconfontwangting</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenjuandiaocha"></i>
                    <div class="name">问卷调查</div>
                    <div class="fontclass">.icon-wenjuandiaocha</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qingjia"></i>
                    <div class="name">请假</div>
                    <div class="fontclass">.icon-qingjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sanjiao"></i>
                    <div class="name">三角</div>
                    <div class="fontclass">.icon-sanjiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tupian"></i>
                    <div class="name">图片</div>
                    <div class="fontclass">.icon-tupian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erweima2"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-erweima2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon1"></i>
                    <div class="name">人才</div>
                    <div class="fontclass">.icon-icon1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daohang"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-daohang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chaxun"></i>
                    <div class="name">查询</div>
                    <div class="fontclass">.icon-chaxun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paixingbang"></i>
                    <div class="name">排行榜</div>
                    <div class="fontclass">.icon-paixingbang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangxing01"></i>
                    <div class="name">房型</div>
                    <div class="fontclass">.icon-fangxing01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youxiang2"></i>
                    <div class="name">邮箱</div>
                    <div class="fontclass">.icon-youxiang2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-31"></i>
                    <div class="name">3</div>
                    <div class="fontclass">.icon-31</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huo"></i>
                    <div class="name">火</div>
                    <div class="fontclass">.icon-huo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rili"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-rili</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-miaoshu"></i>
                    <div class="name">描述</div>
                    <div class="fontclass">.icon-miaoshu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gerenzhongxin"></i>
                    <div class="name">个人中心</div>
                    <div class="fontclass">.icon-gerenzhongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yanzhengma"></i>
                    <div class="name">验证码</div>
                    <div class="fontclass">.icon-yanzhengma</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dijiahongbao"></i>
                    <div class="name">抵价红包</div>
                    <div class="fontclass">.icon-dijiahongbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianjie1"></i>
                    <div class="name">链接</div>
                    <div class="fontclass">.icon-lianjie1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiye"></i>
                    <div class="name">企业</div>
                    <div class="fontclass">.icon-qiye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-13"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-13</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ren1"></i>
                    <div class="name">人</div>
                    <div class="fontclass">.icon-ren1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ziliao"></i>
                    <div class="name">资料</div>
                    <div class="fontclass">.icon-ziliao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiugaimima"></i>
                    <div class="name">修改密码</div>
                    <div class="fontclass">.icon-xiugaimima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangmu"></i>
                    <div class="name">项目</div>
                    <div class="fontclass">.icon-xiangmu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-momentmessage"></i>
                    <div class="name">评论</div>
                    <div class="fontclass">.icon-momentmessage</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin1"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoujishouye"></i>
                    <div class="name">手机_首页</div>
                    <div class="fontclass">.icon-shoujishouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-register-copy"></i>
                    <div class="name">注册</div>
                    <div class="fontclass">.icon-register-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianli"></i>
                    <div class="name">简历</div>
                    <div class="fontclass">.icon-jianli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuoxie1"></i>
                    <div class="name">拖鞋</div>
                    <div class="fontclass">.icon-tuoxie1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinxi"></i>
                    <div class="name">信息</div>
                    <div class="fontclass">.icon-xinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cheyaochi"></i>
                    <div class="name">车钥匙</div>
                    <div class="fontclass">.icon-cheyaochi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-app"></i>
                    <div class="name">app</div>
                    <div class="fontclass">.icon-app</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-specials-car"></i>
                    <div class="name">特价车</div>
                    <div class="fontclass">.icon-specials-car</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chimabiao"></i>
                    <div class="name">尺码表</div>
                    <div class="fontclass">.icon-chimabiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-right"></i>
                    <div class="name">三角</div>
                    <div class="fontclass">.icon-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinxi1"></i>
                    <div class="name">信息</div>
                    <div class="fontclass">.icon-xinxi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuehao"></i>
                    <div class="name">学号</div>
                    <div class="fontclass">.icon-xuehao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenhao"></i>
                    <div class="name">问号</div>
                    <div class="fontclass">.icon-wenhao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kongdiao"></i>
                    <div class="name">空调</div>
                    <div class="fontclass">.icon-kongdiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-msnui-website"></i>
                    <div class="name">网站</div>
                    <div class="fontclass">.icon-msnui-website</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongsisvgtubiaozongji24"></i>
                    <div class="name">我的黑名单</div>
                    <div class="fontclass">.icon-gongsisvgtubiaozongji24</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangxiajiantou"></i>
                    <div class="name">向下箭头</div>
                    <div class="fontclass">.icon-xiangxiajiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rili1"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-rili1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-suitcase"></i>
                    <div class="name">手提箱</div>
                    <div class="fontclass">.icon-suitcase</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baoxian"></i>
                    <div class="name">保险</div>
                    <div class="fontclass">.icon-baoxian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youhuiquan3"></i>
                    <div class="name">优惠券</div>
                    <div class="fontclass">.icon-youhuiquan3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bianhao"></i>
                    <div class="name">编号</div>
                    <div class="fontclass">.icon-bianhao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ziranfengguang"></i>
                    <div class="name">自然风光</div>
                    <div class="fontclass">.icon-ziranfengguang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pinglun"></i>
                    <div class="name">评论</div>
                    <div class="fontclass">.icon-pinglun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cizhuan"></i>
                    <div class="name">瓷砖</div>
                    <div class="fontclass">.icon-cizhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nan"></i>
                    <div class="name">男</div>
                    <div class="fontclass">.icon-nan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shengao"></i>
                    <div class="name">身高</div>
                    <div class="fontclass">.icon-shengao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenjiangongxiang"></i>
                    <div class="name">文件共享</div>
                    <div class="fontclass">.icon-wenjiangongxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianying"></i>
                    <div class="name">电影</div>
                    <div class="fontclass">.icon-dianying</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingye"></i>
                    <div class="name">行业</div>
                    <div class="fontclass">.icon-xingye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ren"></i>
                    <div class="name">人</div>
                    <div class="fontclass">.icon-ren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-6"></i>
                    <div class="name">message-o</div>
                    <div class="fontclass">.icon-6</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ren2"></i>
                    <div class="name">人</div>
                    <div class="fontclass">.icon-ren2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiazai"></i>
                    <div class="name">下载</div>
                    <div class="fontclass">.icon-xiazai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sheyingji"></i>
                    <div class="name">摄影机</div>
                    <div class="fontclass">.icon-sheyingji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-haoyou"></i>
                    <div class="name">好友</div>
                    <div class="fontclass">.icon-haoyou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youhuiquan"></i>
                    <div class="name">优惠券</div>
                    <div class="fontclass">.icon-youhuiquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ren3"></i>
                    <div class="name">人</div>
                    <div class="fontclass">.icon-ren3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye1"></i>
                    <div class="name">商城</div>
                    <div class="fontclass">.icon-shouye1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kuziline"></i>
                    <div class="name">裤子_line</div>
                    <div class="fontclass">.icon-kuziline</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renqun"></i>
                    <div class="name">人群</div>
                    <div class="fontclass">.icon-renqun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuoye"></i>
                    <div class="name">作业</div>
                    <div class="fontclass">.icon-zuoye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kaoqin"></i>
                    <div class="name">考勤</div>
                    <div class="fontclass">.icon-kaoqin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-terminal"></i>
                    <div class="name">显示器</div>
                    <div class="fontclass">.icon-terminal</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_chest"></i>
                    <div class="name">衣柜</div>
                    <div class="fontclass">.icon-icon_chest</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renzheng"></i>
                    <div class="name">认证</div>
                    <div class="fontclass">.icon-renzheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zixun"></i>
                    <div class="name">资讯</div>
                    <div class="fontclass">.icon-zixun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuijian"></i>
                    <div class="name">推荐-</div>
                    <div class="fontclass">.icon-tuijian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gonggao"></i>
                    <div class="name">公告</div>
                    <div class="fontclass">.icon-gonggao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-unie621"></i>
                    <div class="name">修改密码</div>
                    <div class="fontclass">.icon-unie621</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanjiaowangtubiao01"></i>
                    <div class="name">登录</div>
                    <div class="fontclass">.icon-guanjiaowangtubiao01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-z-clothes"></i>
                    <div class="name">衣服</div>
                    <div class="fontclass">.icon-z-clothes</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangmu1"></i>
                    <div class="name">项目</div>
                    <div class="fontclass">.icon-xiangmu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yugang"></i>
                    <div class="name">浴缸</div>
                    <div class="fontclass">.icon-yugang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guige"></i>
                    <div class="name">规格</div>
                    <div class="fontclass">.icon-guige</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuce"></i>
                    <div class="name">注册</div>
                    <div class="fontclass">.icon-zhuce</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwudai"></i>
                    <div class="name">购物袋</div>
                    <div class="fontclass">.icon-gouwudai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dengpao"></i>
                    <div class="name">灯泡</div>
                    <div class="fontclass">.icon-dengpao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daohang1"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-daohang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-maiche"></i>
                    <div class="name">卖车</div>
                    <div class="fontclass">.icon-maiche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-denglu"></i>
                    <div class="name">登录</div>
                    <div class="fontclass">.icon-denglu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-location1"></i>
                    <div class="name">地点</div>
                    <div class="fontclass">.icon-location1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rexiaoshangpin"></i>
                    <div class="name">热销商品</div>
                    <div class="fontclass">.icon-rexiaoshangpin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ren31"></i>
                    <div class="name">人</div>
                    <div class="fontclass">.icon-ren31</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhiye"></i>
                    <div class="name">职业</div>
                    <div class="fontclass">.icon-zhiye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chongzhi"></i>
                    <div class="name">充值</div>
                    <div class="fontclass">.icon-chongzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dashangjilu"></i>
                    <div class="name">打赏记录</div>
                    <div class="fontclass">.icon-dashangjilu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangdan"></i>
                    <div class="name">榜单</div>
                    <div class="fontclass">.icon-bangdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-meinv"></i>
                    <div class="name">美女</div>
                    <div class="fontclass">.icon-meinv</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yidi"></i>
                    <div class="name">异地</div>
                    <div class="fontclass">.icon-yidi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youhuiquan4"></i>
                    <div class="name">优惠券</div>
                    <div class="fontclass">.icon-youhuiquan4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gonggao1"></i>
                    <div class="name">-_公告</div>
                    <div class="fontclass">.icon-gonggao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gril"></i>
                    <div class="name">女</div>
                    <div class="fontclass">.icon-gril</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontrocket12"></i>
                    <div class="name">砖石</div>
                    <div class="fontclass">.icon-iconfontrocket12</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenhebijijishibenxiezi"></i>
                    <div class="name">审核 笔记 记事本 写字</div>
                    <div class="fontclass">.icon-shenhebijijishibenxiezi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinfeng"></i>
                    <div class="name">信封</div>
                    <div class="fontclass">.icon-xinfeng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youzhi"></i>
                    <div class="name">优质</div>
                    <div class="fontclass">.icon-youzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kongjianxuanze"></i>
                    <div class="name">空间选择</div>
                    <div class="fontclass">.icon-kongjianxuanze</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon3"></i>
                    <div class="name">查看</div>
                    <div class="fontclass">.icon-icon3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon11"></i>
                    <div class="name">人</div>
                    <div class="fontclass">.icon-icon11</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-laoshi"></i>
                    <div class="name">老师</div>
                    <div class="fontclass">.icon-laoshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rexiao"></i>
                    <div class="name">热销</div>
                    <div class="fontclass">.icon-rexiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangzuo01-copy"></i>
                    <div class="name">向左</div>
                    <div class="fontclass">.icon-xiangzuo01-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-100guohushangpai01"></i>
                    <div class="name">100_过户上牌</div>
                    <div class="fontclass">.icon-100guohushangpai01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye2-copy"></i>
                    <div class="name">首页-首页</div>
                    <div class="fontclass">.icon-shouye2-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nan1"></i>
                    <div class="name">男</div>
                    <div class="fontclass">.icon-nan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duankai"></i>
                    <div class="name">断开</div>
                    <div class="fontclass">.icon-duankai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zijinguanli"></i>
                    <div class="name">资金</div>
                    <div class="fontclass">.icon-zijinguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yunyingchuanbo"></i>
                    <div class="name">运营船舶</div>
                    <div class="fontclass">.icon-yunyingchuanbo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouzhiliushui"></i>
                    <div class="name">收支流水</div>
                    <div class="fontclass">.icon-shouzhiliushui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-next_2"></i>
                    <div class="name">next_2</div>
                    <div class="fontclass">.icon-next_2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-search_2"></i>
                    <div class="name">search_2</div>
                    <div class="fontclass">.icon-search_2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jian"></i>
                    <div class="name">检</div>
                    <div class="fontclass">.icon-jian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiashizhengzhuanru"></i>
                    <div class="name">驾驶证转入</div>
                    <div class="fontclass">.icon-jiashizhengzhuanru</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youzhipinpai"></i>
                    <div class="name">优质品牌</div>
                    <div class="fontclass">.icon-youzhipinpai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duochicun"></i>
                    <div class="name">多尺寸</div>
                    <div class="fontclass">.icon-duochicun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-check"></i>
                    <div class="name">查看</div>
                    <div class="fontclass">.icon-check</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-houtai9"></i>
                    <div class="name">后台9</div>
                    <div class="fontclass">.icon-houtai9</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rexiaoshangpin1"></i>
                    <div class="name">热销商品</div>
                    <div class="fontclass">.icon-rexiaoshangpin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiadanfangjianshu"></i>
                    <div class="name">下单_房间数</div>
                    <div class="fontclass">.icon-xiadanfangjianshu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tejia"></i>
                    <div class="name">特价</div>
                    <div class="fontclass">.icon-tejia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-book1"></i>
                    <div class="name">书本</div>
                    <div class="fontclass">.icon-book1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shipin"></i>
                    <div class="name">视频</div>
                    <div class="fontclass">.icon-shipin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xin1"></i>
                    <div class="name">心</div>
                    <div class="fontclass">.icon-xin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hongbao"></i>
                    <div class="name">湖畔－红包</div>
                    <div class="fontclass">.icon-hongbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ditudingwei"></i>
                    <div class="name">地图定位</div>
                    <div class="fontclass">.icon-ditudingwei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-vi"></i>
                    <div class="name">JINJIE-vi</div>
                    <div class="fontclass">.icon-vi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuzhuangtu"></i>
                    <div class="name">柱状图</div>
                    <div class="fontclass">.icon-zhuzhuangtu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-common-xilieriji-copy"></i>
                    <div class="name">系列日记</div>
                    <div class="fontclass">.icon-common-xilieriji-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wangzhi"></i>
                    <div class="name">网址</div>
                    <div class="fontclass">.icon-wangzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bhjmianbushibie"></i>
                    <div class="name">办会家_人像识别</div>
                    <div class="fontclass">.icon-bhjmianbushibie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-edit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tizhongzhibiao"></i>
                    <div class="name">体重指标</div>
                    <div class="fontclass">.icon-tizhongzhibiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shu"></i>
                    <div class="name">书</div>
                    <div class="fontclass">.icon-shu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qingjiadan"></i>
                    <div class="name">请假单</div>
                    <div class="fontclass">.icon-qingjiadan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youhuiquan1"></i>
                    <div class="name">优惠券</div>
                    <div class="fontclass">.icon-youhuiquan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontchengji-copy-copy"></i>
                    <div class="name">iconfont-成绩</div>
                    <div class="fontclass">.icon-iconfontchengji-copy-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijuan"></i>
                    <div class="name">试卷</div>
                    <div class="fontclass">.icon-shijuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiye1"></i>
                    <div class="name">企业</div>
                    <div class="fontclass">.icon-qiye1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gengxin"></i>
                    <div class="name">更新</div>
                    <div class="fontclass">.icon-gengxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bi"></i>
                    <div class="name">笔</div>
                    <div class="fontclass">.icon-bi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-recommend"></i>
                    <div class="name">推荐</div>
                    <div class="fontclass">.icon-recommend</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuangou"></i>
                    <div class="name">团购</div>
                    <div class="fontclass">.icon-tuangou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tubiaozhizuomoban"></i>
                    <div class="name">魔镜</div>
                    <div class="fontclass">.icon-tubiaozhizuomoban</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yigui"></i>
                    <div class="name">衣柜</div>
                    <div class="fontclass">.icon-yigui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianshi"></i>
                    <div class="name">电视</div>
                    <div class="fontclass">.icon-dianshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bianhao1"></i>
                    <div class="name">编号</div>
                    <div class="fontclass">.icon-bianhao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye-shouye"></i>
                    <div class="name">H首页-首页</div>
                    <div class="fontclass">.icon-shouye-shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youhuiquan2"></i>
                    <div class="name">优惠券</div>
                    <div class="fontclass">.icon-youhuiquan2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-12gouwudai"></i>
                    <div class="name">12购物袋</div>
                    <div class="fontclass">.icon-12gouwudai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiye2"></i>
                    <div class="name">企业</div>
                    <div class="fontclass">.icon-qiye2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfont-5"></i>
                    <div class="name">防护</div>
                    <div class="fontclass">.icon-iconfont-5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuolansousuo"></i>
                    <div class="name">搜索栏-搜索</div>
                    <div class="fontclass">.icon-sousuolansousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiazhaonianshen"></i>
                    <div class="name">证件年审</div>
                    <div class="fontclass">.icon-jiazhaonianshen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paihangdiyi"></i>
                    <div class="name">排行第一</div>
                    <div class="fontclass">.icon-paihangdiyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiahaoyou"></i>
                    <div class="name">加好友</div>
                    <div class="fontclass">.icon-jiahaoyou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wangzhan"></i>
                    <div class="name">网站</div>
                    <div class="fontclass">.icon-wangzhan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuheyingxiao"></i>
                    <div class="name">组合营销</div>
                    <div class="fontclass">.icon-zuheyingxiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-diyi"></i>
                    <div class="name">第一</div>
                    <div class="fontclass">.icon-diyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-banbengengxin"></i>
                    <div class="name">版本更新</div>
                    <div class="fontclass">.icon-banbengengxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ziyuan"></i>
                    <div class="name">资源 2</div>
                    <div class="fontclass">.icon-ziyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lian"></i>
                    <div class="name">链</div>
                    <div class="fontclass">.icon-lian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guize"></i>
                    <div class="name">规则</div>
                    <div class="fontclass">.icon-guize</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo-sousuo"></i>
                    <div class="name">搜索-搜索</div>
                    <div class="fontclass">.icon-sousuo-sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pinlei"></i>
                    <div class="name">品类</div>
                    <div class="fontclass">.icon-pinlei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wifi1"></i>
                    <div class="name">wifi</div>
                    <div class="fontclass">.icon-wifi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-test"></i>
                    <div class="name">6</div>
                    <div class="fontclass">.icon-icon-test</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chuanzhen"></i>
                    <div class="name">传真</div>
                    <div class="fontclass">.icon-chuanzhen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanghukaiqi"></i>
                    <div class="name">防护开启</div>
                    <div class="fontclass">.icon-fanghukaiqi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon_jiangbei"></i>
                    <div class="name">127icon_jiangbei</div>
                    <div class="fontclass">.icon-icon_jiangbei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon133"></i>
                    <div class="name">介绍</div>
                    <div class="fontclass">.icon-icon133</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paper-plane"></i>
                    <div class="name">纸飞机</div>
                    <div class="fontclass">.icon-paper-plane</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaochengxu"></i>
                    <div class="name">小程序</div>
                    <div class="fontclass">.icon-xiaochengxu</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
